<template>
    <view class="address-section" @click="selectAddress">
        <view class="address-content" v-if="!showStatus">
            <u-icon name="map" size="20" color="#666"></u-icon>
            <text class="address-text">添加服务地址</text>
        </view>
        <view class="address-content"  v-else>
            <u-icon name="map" size="20" color="#666"></u-icon>
            <view class="address-info">
                <view class="address-header">
                    <text class="address-name">{{ displayAddress.name }}</text>
                    <text class="address-phone">{{ displayAddress.telephone }}</text>
                </view>
                <text class="address-detail">{{ displayAddress.province_name }} {{ displayAddress.city_name }} {{ displayAddress.district_name }} {{ displayAddress.address }}</text>
            </view>
        </view>
        <u-icon name="arrow-right" size="16" color="#999"></u-icon>
    </view>
</template>
<script>
import { geDefaultAddress } from '@/api/index.js'
import { mapGetters, mapActions } from 'vuex'

export default{
    props: {
        blackUrl: {
            type: String,
            default:''
        }
    },
    data() {
        return {
            localAddress: {},
            showStatus: false
        }
    },
    computed: {
        ...mapGetters(['currentAddress', 'defaultAddress', 'addressList']),
        // 优先使用 store 中的地址，如果没有则使用本地数据
        displayAddress() {
            return this.currentAddress || this.defaultAddress || this.localAddress
        }
    },
    created(){
        this.initAddress()
    },
    watch: {
        // 监听 store 中地址的变化
        currentAddress: {
            handler(newAddress) {
                if (newAddress && Object.keys(newAddress).length > 0) {
                    this.localAddress = newAddress
                    this.showStatus = true
                }
            },
            immediate: true
        },
        // 监听默认地址变化
        defaultAddress: {
            handler(newAddress) {
                if (newAddress && Object.keys(newAddress).length > 0 && !this.currentAddress) {
                    this.localAddress = newAddress
                    this.showStatus = true
                }
            },
            immediate: true
        }
    },
    methods: {
        ...mapActions(['getAddressList', 'getAddressUrl']),
        
        // 地址选择
        async selectAddress() {
            await this.getAddressUrl(this.blackUrl)
            uni.navigateTo({ url: '/views/address/manage?isClick=true' });
        },
        
        // 初始化地址数据
        async initAddress() {
            // 优先使用 store 中的全局地址数据
            if (this.currentAddress && Object.keys(this.currentAddress).length > 0) {
                this.localAddress = this.currentAddress
                this.showStatus = true
            } else if (this.defaultAddress && Object.keys(this.defaultAddress).length > 0) {
                this.localAddress = this.defaultAddress
                this.showStatus = true
            } else {
                // 如果store中没有数据，先尝试获取地址列表
                await this.getAddressList()
                
                // 再次检查store中是否有数据
                if (this.defaultAddress && Object.keys(this.defaultAddress).length > 0) {
                    this.localAddress = this.defaultAddress
                    this.showStatus = true
                } else {
                    // 如果还是没有，则获取接口默认数据
                    this.geDefaultAddressEvent()
                }
            }
        },
        
        //获取默认地址
        geDefaultAddressEvent() {
            geDefaultAddress().then((res) => {
                if (res.errno === 0 && res.data) {
                    this.localAddress = res.data
                    this.showStatus = true
                } else {
                    this.showStatus = false
                }
            }).catch(() => {
                this.showStatus = false
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.address-section {
    background: #FFFFFF;
    padding:28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28rpx;
    border-radius: 20rpx;

    .address-content {
        display: flex;
        align-items: center;
        gap: 16rpx;
        flex: 1;
    }

    .address-info {
        flex: 1;
    }

    .address-header {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
    }

    .address-name {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        margin-right: 20rpx;
    }

    .address-phone {
        font-size: 26rpx;
        color: #B3B7BD;
    }

    .address-detail {
        font-size: 24rpx;
        color: #999;
        line-height: 1.4;
    }

    .address-text {
        font-size: 28rpx;
        color: #333;
    }
}
</style>